<template>
	<u-mask :show="showFullScreen" @click="closeMask">
		<view class="warp">
			<view class="rect p-2 animated zoomInDown fast" @tap.stop>
				<view class="title font-md font-weight text-center">{{info.projectTitle|| dataList[keyVal].title }}</view>
				<scroll-view scroll-y="true" style="height:460rpx ;">
					<view class="contant mt-2 ti2 line-h-md">{{info.projectSynopsis|| dataList[keyVal].contant }}</view>
				</scroll-view>

				<view class="guanbi" @tap="closeMask" />
			</view>
		</view>
	</u-mask>
</template>

<script>
import { dataList } from './fullScreen_data_list.js';
export default {
	props: {
		showFullScreen: {
			type: Boolean,
			default: () => false
		},
		keyVal: {
			type: String,
			default: () => 'jinrong'
		},
		info: {
			type: Object,
			default: () => {}
		},
	},
	data() {
		return {
			dataList
		};
	},
	methods: {
		closeMask() {
			this.$emit('update:showFullScreen', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 520rpx;
	height: 620rpx;
	background-color: #fff;
	position: relative;
	border-radius: 8rpx;
}

.guanbi {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	border: 2rpx solid #ccc;
	margin-top: 40rpx;
	position: absolute;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);

	&::after,
	&::before {
		content: '';
		display: block;
		width: 4rpx;
		height: 26rpx;
		background-color: #ccc;
		font-size: 30rpx;
		position: absolute;
		left: 50%;
		top: 50%;
	}
	&::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	&::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
}
</style>
